<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>签到抽奖</title>
    <link rel="stylesheet" href="<c:url value='/resource/css/osyear/main.css'></c:url>">
    <script language="JavaScript" src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
    <script language="JavaScript" src="<c:url value='/resource/js/jquery.form.min.js'/>"></script>
    <script language="JavaScript" href="<c:url value='/resource/js/osyear/layer/layer.js' />" ></script>
    <script language="JavaScript" src="<c:url value='/resource/js/osyear/FormValid.js'/>"></script>
    <script language="JavaScript" src="<c:url value='/resource/js/osyear/main.js'/>"></script>
<%--    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BoDHWfB34TUhSDodZSudcbo0"></script>--%>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=qBholiSEA43Kk3sBiXAeQql9ReLMZGqW&s=1"></script>
    <script type="text/javascript">
        $(function(){
        //验证码，实际无用
            var code = Math.floor(Math.random()*9000)+1000;
            $("#yzmtext").text(code);
            $("#yzmtext").bind("click",function(){
                code = Math.floor(Math.random()*9000)+1000;
                $("#yzmtext").text(code);
            });
            initLocation();
        });
        function saveForm(){
            if($("#name").val() ==""){
                alert("请输入姓名");
                return;
            }
            if($("#idcard").val() ==""){
                alert("请输入身份证号码");
                return;
            }
            if($("#yzm").val() ==""){
                alert("请输入验证码");
                return;
            }
            if($("#yzm").val() !=  $("#yzmtext").text()){
                alert("请输入正确的验证码");
                return;
            }
                $("#saveForm").ajaxSubmit({
                    dataType: "json",
                    success: function (resp, status, xhr) {
                        if (resp.succ) {
                            alert(resp.msg);
                            window.location.href = "${pageContext.request.contextPath}/api/qrcode/myAward";
                        } else {
                            alert(resp.msg);
                            return false;
                        }
                    }
                });
        }

        //定位
        function initLocation() {
            var gc = new BMap.Geocoder();
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                $("#Lng").val(r.point.lng);
                $("#Lat").val(r.point.lat);
                    getGeocode(r.point);
                } else {
                }
            }, {
                enableHighAccuracy: true
            });
        }

        //地址解析
        function getGeocode(point){
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                $("#Location").val(
                        addComp.province + addComp.city
                        + addComp.district + addComp.street
                        + addComp.streetNumber);
            });
        }
    </script>
</head>

<body>
<div class="toupiao">
    <div class="toupiao_top">
        <img src="<c:url value='/resource/images/osyear/top.png'/>" class="img1" />
    </div>
    <form id="saveForm" action="<c:url value='/api/qrcode/register'/>" method="post">
    <div class="toupiao_bottom">
        <div class="toupiao_bottom_main">
            <img src="<c:url value='/resource/images/osyear/bottom.png'/>" class="img2" />
            <div class="toupiao_main">
                <div class="toupiao_main_center">
                    <input type="hidden"   id="Lat"  name="Lat" />
                    <input type="hidden"   id="Lng"  name="Lng" />
                    <input type="hidden"   id="Location"  name="Location" />
                    <div class="row row_top">
                        <input type="text" placeholder="姓名" class="inpt1" id="name"  name="name" />
                    </div>
                    <div class="row">
                        <input type="text" placeholder="身份证" class="inpt1" id="idcard" name="idcard" />
                    </div>
                    <div class="row1">
                        <div class="row1_lf">
                            <input type="text" placeholder="验证码" id="yzm" />
                        </div>
                        <div class="row1_rt" style="text-align: center">
                            <span id="yzmtext" ></span>
                        </div>
                    </div>
                    <p id="button" onclick="saveForm()"></p>
                </div>
            </div>
        </div>
    </div>
    </form>
<%--    <!--弹出层-->
    --%>
    </div>
</div>
</body>

</html>